<script setup lang="ts">
import { ref, watch } from 'vue';
import { useUserStore } from '@/stores'
// import { useLoginStore } from '@/stores'
import { loginAPI } from '@/api/login'
import { onLoad } from '@dcloudio/uni-app'

const userStore = useUserStore()
// const loginStore = useLoginStore()


const showActionSheet = ref(true)
const aloneChecked = ref(false)

const showModal = ref(false)

const loginInfo = ref()

// 暂不登录按钮
const closeActionSheet = () => {
  showActionSheet.value = false
  userStore.setLoginStatus(true) // 设置暂不登录，true说明点了暂不登录
  // loginStore.setTokenStatus(false) // 更新登录弹窗展示状态
  uni.$emit('closeActionSheet')
}

const getPoneNum = () => {
  uni.showToast({
    title: '请阅读并同意协议',
    icon: 'none',
    duration: 2000
  })
}

const closeAction = () => {
  showActionSheet.value = false
  // loginStore.setTokenStatus(false) // 更新登录弹窗展示状态
}

// 调起微信手机号登录面板
const getUserNum = (e: any) => {
  if (e.detail.errMsg === 'getPhoneNumber:ok') {
    console.log('e====>', loginInfo.value)
    if (!loginInfo.value) {
      uni.login({
        // 表示授权方式  如果不设置则弹出登录列表选择界面
        provider: 'weixin',
        success: async function (loginRes) {
          loginInfo.value = loginRes
          toLogin(e)
        }
      })
    } else {
      toLogin(e)
    }
  } else {
    showActionSheet.value = false
    // loginStore.setTokenStatus(false) // 更新登录弹窗展示状态
    uni.$emit('loginError')
  }
  uni.showTabBar({ animation: false }) 
}

const toLogin = (e: any) => {
  const pages = getCurrentPages()
  const currentPage: any = pages[pages.length - 1]
  const channel_code = currentPage.options.channel_code || ''
  let params = {
    code: loginInfo.value.code,
    encryptedData: e.detail.encryptedData,
    iv: e.detail.iv,
    smscode: '134245',
    channel_code: channel_code
  }
  loginAPI(params).then((res: any) => {
    console.log('res111===>', res)
    
    if (res) {
      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 2000
      })
      userStore.setToken(res.token)
    //   userStore.setUserInfo(res.)
      if (res.userinfo.new_user) {
        // // 获取用户信息
        uni.getUserInfo({
          provider: 'weixin',
          success: function(infoRes: any) {
            userStore.setUserInfo(infoRes.userInfo)
            userStore.setChannelStatus(true)
            uni.$emit('loginSuccess', infoRes.userInfo)
            // if (!infoRes.userInfo.is_user_channel) {
            //   uni.navigateTo({
            //     url:`/pagesA/source/index`
            //   })
            // }
          }
        })
      } else {
        userStore.setUserInfo(res.userinfo)
        userStore.setChannelStatus(true)
        uni.$emit('loginSuccess', res.userinfo)
        // if (!res.userinfo.is_user_channel) {
        //   uni.navigateTo({
        //     url:`/pagesA/source/index`
        //   })
        // }
      }
    }
  })
  .catch((err) => {
    console.log('err===>', err)
    closeActionSheet()
  })
}


// 用户协议
const clickUserAgree = () => {
  uni.navigateTo({
    url: '/pagesA/agreement/index'
  })
}

const confirmBtn = (e: any) => {
  console.log('e===>', e)
  uni.requestSubscribeMessage({
    tmplIds:['F5FotCxil5d_G7yDwIpr8AiCLYbOp4_4feX6CJcPbAI', 'WNQIQXDl3J64EI0fo0di83JqliyMzp2P1FE5cz-Z4UA'],
    success: res => {
      console.log(res)
    },
    fail: res=>{
      console.log(res)
    }
  })
  
}

onLoad(() => {
  
  uni.login({
    // 表示授权方式  如果不设置则弹出登录列表选择界面
    provider: 'weixin',
    success: async function (loginRes) {
      loginInfo.value = loginRes
    }
  })
})

</script>



<template>
  <!-- <view class="login-action-sheet" v-if="showActionSheet"> -->
    <up-action-sheet round="10" :closeOnClickOverlay="true" :safeAreaInsetBottom="true" :closeOnClickAction="true" :show="showActionSheet">
      <view class="content">
        <img style="width:153px; height: 24px; margin: 12px 0;" src="/static/logo.png" alt="">
        <view class="title">欢迎注册玻色量子开发者社区</view>
        <view class="sub-title">注册后可获得更多服务体验</view>
        <view class="read-agree">
          <up-checkbox
              label="我已阅读并同意"
              name="agree"
              usedAlone
              v-model:checked="aloneChecked"
          >
          </up-checkbox>
          <view style="color: #2A65FF;margin-left: 4px;" @click="clickUserAgree">用户协议</view>
        </view>
        <up-button v-if="!aloneChecked" color="#2A65FF" text="手机号一键登录" @click="getPoneNum"></up-button>
        <up-button v-else color="#2A65FF" openType="getPhoneNumber" text="手机号一键登录" @getphonenumber="getUserNum" @click="closeAction"></up-button>
        <view class="no-login" @click="closeActionSheet">暂不登录</view>
      </view>
    </up-action-sheet>
    <!-- <up-modal :show="showModal" ref="uModal">
      <template #confirmButton>
        <button @click="confirmBtn">允许</button>
      </template>
    </up-modal> -->
  <!-- </view> -->
</template>

<style lang="scss">
// .login-action-sheet{
  .content {
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .title {
      font-size: 18px;
      font-weight: 500;
      line-height: 26px;
      letter-spacing: 0.29px;
      color: #333333;
      margin: 24px 0 5px 0;
    }
    .sub-title {
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0.29px;
      font-variation-settings: "opsz" auto;
      color: #333333;
    }
    .read-agree {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.29px;
      font-variation-settings: "opsz" auto;
      /* 主色 */
      color: #2A65FF;
      display: flex;
      align-items: center;
      margin: 23px 0;
    }
    .no-login {
      width: 100%;
      font-size: 14px;
      text-align: center;
      /* base/font/gy3 */
      color: rgba(0, 0, 0, 0.4);
      margin: 12px 0 30px 0;
    }
  }
// }
</style>
